<template>
	<view class="box">
		<text class="title">推荐品牌</text>
		<view class="list">
			<view class="item" v-for="(item, index) in data" :key="index" @click="openList(item)">
				<image :src="item.goods_cate_image" mode="aspectFit"></image>
			</view>
		</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props: {
			data: {
				type: Array,
				default: ()=>[]
			}
		},
		methods:{
			openList(item){
				uni.navigateTo({
					url:`/pages/third/third?type=normal&id=${item.id}&name=${item.goods_cate_name}`
				})
			}	
		}
	}
</script>

<style scoped lang="scss">
	.box{
		border-radius: 10rpx;
		.title{
			font-size: 30rpx;
			font-weight: bold;
			display: inline-block;
			margin-bottom: 10rpx;
		}
		.list{
			display: grid;
			grid-template-columns: repeat(4, 155rpx);
			grid-template-rows: 110rpx;
			grid-row-gap: 11rpx;
			grid-column-gap: 17rpx;
			.item{
				@extend .flex-center;
				border: 1px solid #EEEFF0;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
</style>